<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>当面付测试页</title>
<script type="text/javascript" src="/static/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.form.js"></script>
<script type="text/javascript" src="/static/js/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="/static/js/base64.js"></script>
<script type="text/javascript" src="/static/js/md5.js"></script>

<script type="text/javascript">
	//对Date的扩展，将 Date 转化为指定格式的String
	//月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， 
	//年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) 
	//例子： 
	//(new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 
	//(new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18 
	Date.prototype.format = function (fmt) { //author: meizz 
		 var o = {
		     "M+": this.getMonth() + 1, //月份 
		     "d+": this.getDate(), //日 
		     "H+": this.getHours(), //小时 
		     "m+": this.getMinutes(), //分 
		     "s+": this.getSeconds(), //秒 
		     "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
		     "S+": this.getMilliseconds() //毫秒 
		 };
		 if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		 for (var k in o)
		 if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
		 return fmt;
	}
	
	String.prototype.trim = function() { 
		return this.replace(/(^\s*)|(\s*$)/g, ''); 
	}; 
	
	$.fn.serializeJSON = function(){  
	   var o = {};  
	   var a = this.serializeArray();  
	   $.each(a, function() {  
	       if (o[this.name]) {  
	           if (!o[this.name].push) {  
	               o[this.name] = [o[this.name]];  
	           }  
	           o[this.name].push(this.value || '');  
	       } else {  
	           o[this.name] = this.value || '';  
	       }  
	   });  
	   return o;  
	}; 
	// 生成一个表格
	function makeTable(data,target){
		if(!(data instanceof Array)){
			var c = [];
			c.push(data);
			data = c;
		}
		var table_str = '<table border="1" cellspacing="0" style="margin-top:5px;">';
		var head_str = '<tr>';
		for(var key in data[0]){
			head_str += '<th>'+key+'</th>';
		}
		head_str += '</tr>';
		var content_str = '';
		for(var i=0; i<data.length; i++){
			var temp_str = '<tr>';
			for(var key in data[0]){	
				var temp_data = data[i][key]==null?'空':data[i][key];
				temp_str += '<td>' + temp_data + '</td>';
			}
			temp_str += '</tr>';
			content_str += temp_str;
		}
		table_str += head_str + content_str;
		table_str += '</table>';
		$(target).html(table_str);		
	}
	// 产生一系列核销码
	function makeVerifyCodes(data,target){
		if(!(data instanceof Array)){
			var c = [];
			c.push(data);
			data = c;
		}
		var verify_codes = '';
		for(var i=0; i<data.length; i++){
			if (data[i]['verifyCode']!=null){
				verify_codes = verify_codes  + data[i]['verifyCode'] +'<br/>'; 
			}
		}
		$(target).html(verify_codes);
	}	
</script>

<div style="widht:40px;float:left;position:fixed;top:30px;right:30px;">
	<ul style="width:100%;float:left">
		<li><a href="#btn1">1:登录</a></li>
		<li><a href="#btn2">2:退出登录</a></li>
		<li><a href="#btn3">3:获取用户信息</a></li>
		<li><a href="#btn4">4:通用条形码支付</a></li>
		<li><a href="#btn5">5:支付宝扫码支付</a></li>
		<li><a href="#btn6">6:支付宝门店码支付</a></li>
		<li><a href="#btn7">7:订单列表查询</a></li>
		<li><a href="#btn8">8:订单查询</a></li>
		<li><a href="#btn9">9:退款</a></li>
		<li><a href="#btn10">10:交易汇总</a></li>
	</ul>
</div>
<!-- Step1: 获取access_token -->
<div style="width:100%">
	<button id="btn1">1:登录</button></br>
	<form>
	<lable>url：</lable><input class="url" type="text" value="http://localhost:83/authentication/form"/><br/>
	<lable>username：</lable><input class="username" type="text" value="15055555555"/><br/>
	<lable>password：</lable><input class="password" type="password" value="123456"/><br/>
	</form>
	<a href=""></a>
	<lable><font color='red'>access_token：</font></lable><input type="text" class="access_token" value="" style="width:300px"></br>
</div>
<script type="text/javascript">
	$("#btn1").bind("click",function(){
		var that = this
		$.ajax({
			url: $(this).parent().find('.url').val(),
			dataType:"json",   //返回格式为json
			type:'post',
			data:{
				username: $(this).parent().find('.username').val(),
				password: $(this).parent().find('.password').val(),
			},
			/* headers: {
				'Authorization': 'xxxxxxxxxxxxxxxxxxx'
			}, */
			success:function(res){
				if(res.code!=10000){
					alert(res.msg)
				}
				$(that).parent().find('.access_token').val(res.data.access_token)
			}
		});
	});
</script>
</div>
<hr/>

<!-- Step5: 支付宝二维码预支付 -->
<div style="width:100%">
	<button id="btn5">5:支付宝扫码支付</button></br>
	<form>
	<lable>amount ：</lable><input class="amount" type="text" value="0.01" name="amount"/><br/>
	<lable>username ：</lable><input class="username" type="text" value="15055555555" name="username"/><br/>
	<lable>deviceNo ：</lable><input class="deviceNo" type="text" value="ta00001" name="deviceNo"/><br/>
	<lable>payRemark ：</lable><input class="payRemark" type="text" value="支付宝扫码支付备注" name="payRemark"/><br/>
	</form>
	<div style="width:100%;float:left;display:none">
		<div style="width:50%;float:left;">
			<div id="qrcode" style="width:100px; height:100px; margin:15px;"></div>
		</div>
		<div style="width:50%;float:left;">
			<textarea style="width:100%;height:199px;" id="textarea"></textarea>
		</div>
	</div>
	<div id="test" style="clearboth;"></div>
	<div id="test1" style="clearboth;"></div>
	<div id="test2" style="clearboth;"></div>
</div>
<script type="text/javascript">
	var ws = null;
	$("#btn5").bind("click",function(){
		var btn = $(this);
		$.ajax({
			url:'http://localhost:83/receive/v1/platform/offline/alif2f/pre_create',
			type:'post',
			dataType:'json',
			data:$(this).parent().find("form").serialize(),
			asyn:false,
			success:function(res){
				if(res.code!=10000){
					alert(res.msg);
					$(btn).parent().find("#qrcode").parent().parent().hide();	
					return;
				}
				$(btn).parent().find("#qrcode").parent().parent().show();
				$(btn).parent().find("#qrcode").html("");
				$(btn).parent().find("#qrcode").qrcode({ 
				    width: 160, //宽度 
				    height: 160, //高度 
				    text: res.data.param1 //任意内容 
				}); 
				
				// TODO 根据订单号建立websocket链接，打印在textarea中
				ws = new WebSocket("ws://localhost:8383/websocket?order_no="+res.data.orderNo);
				var textarea = $(btn).parent().find("#textarea");
				makeTable(res.data,$(btn).parent().find("#test"));
				
				ws.onmessage = function(evt) {
					$(textarea).append(evt.data+"\n");
					var order = JSON.parse(evt.data);
					var pay = order.pay
					makeTable(order,$(btn).parent().find("#test1"));
					makeTable(pay,$(btn).parent().find("#test2"));
					ws.close();
				};
				ws.onerror = function(evt) {
					$(textarea).append("WebSocketError\n");
				};
				ws.onopen = function(){
				    ws.send(11111); // 心跳包 
				}; 
				ws.onclose = function(evt){
				    $(textarea).append("WebSocketClosed\n");
				}; 
			}
		});
	});
</script>
<hr/>

<!-- https://blog.csdn.net/moshowgame/article/details/80275084  -->
<!-- <script>
	var socket;
	if (typeof (WebSocket) == "undefined") {
		console.log("您的浏览器不支持WebSocket");
	} else {
		console.log("您的浏览器支持WebSocket");
		//实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接  
		//等同于socket = new WebSocket("ws://localhost:8083/checkcentersys/websocket/20");  
		socket = new WebSocket("http://127.0.0.1:8083/websocket?sid=1".replace("http","ws"));
		//打开事件  
		socket.onopen = function() {
			console.log("Socket 已打开");
			//socket.send("这是来自客户端的消息" + location.href + new Date());  
		};
		//获得消息事件  
		socket.onmessage = function(msg) {
			console.log(msg.data);
			//发现消息进入    开始处理前端触发逻辑
		};
		//关闭事件  
		socket.onclose = function() {
			console.log("Socket已关闭");
		};
		//发生了错误事件  
		socket.onerror = function() {
			alert("Socket发生了错误");
			//此时可以尝试刷新页面
		}
		//离开页面时，关闭socket
		//jquery1.8中已经被废弃，3.0中已经移除
		// $(window).unload(function(){  
		//     socket.close();  
		//});  
	}
</script> -->
</head>
<body>

</body>

</html>